<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <!-- Latest compiled and minified CSS & JS -->
    <link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="hd" class="container">
    <div class="panel panel-default">
    	  <div class="panel-heading">
    			<h3 class="panel-title">文章添加</h3>
    	  </div>
    	  <div class="panel-body">
    			<form action="" method="POST" class="form-horizontal" role="form">
    			    <div class="form-group">
                        <label for="" class="col-sm-2 control-label text-right">文章标题</label>
                        <div class="col-sm-10">
                            <input type="text" v-model.trim="article.title" class="form-control">
                        </div>
    			    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label text-right">作者</label>
                        <div class="col-sm-10">
                            <input type="text" v-model.trim="article.author" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label text-right">所属分类</label>
                        <div class="col-sm-10">
                            <select v-model="article.cate" name="name" id="inputID" class="form-control">
                            	<option :value="v.id" v-for="v in cate">{{v.cname}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label text-right">是否推荐</label>
                        <div class="col-sm-10">
                            <div class="radio-inline">
                                <label>
                                    <input type="radio" id="inputID" v-model.number="article.tj" value="1">
                                    是
                                </label>
                            </div>
                            <div class="radio-inline">
                                <label>
                                    <input type="radio" id="inputID" v-model.number="article.tj" value="0" >
                                    否
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label text-right">是否热门</label>
                        <div class="col-sm-10">
                            <div class="radio-inline">
                                <label>
                                    <input type="radio" id="inputID" v-model.number="article.hot" value="1" >
                                    是
                                </label>
                            </div>
                            <div class="radio-inline">
                                <label>
                                    <input type="radio" id="inputID" v-model.number="article.hot" value="0" >
                                    否
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label text-right">文章标签</label>
                        <div class="col-sm-10">
                            <div class="checkbox-inline" v-for="v in tag">
                            	<label>
                            		<input v-model="article.tag" type="checkbox" :value="v.id" id="">
                            		{{v.tname}}
                            	</label>
                            </div>

                        </div>
                    </div>
    			    <div class="form-group">
    			        <div class="col-sm-10 col-sm-offset-2">
    			            <button type="submit" class="btn btn-primary">Submit</button>
    			        </div>
    			    </div>
    			</form>
    	  </div>
    </div>
    {{article}}
</div>

<script>
    var app=new Vue({
        el:'#hd',
        data:{
            cate:[
                {id:1,cname:'HTML'},
                {id:2,cname:'JAVASCRIPT'},
                {id:3,cname:'PHP'},
                {id:4,cname:'VUE'}
            ],
            tag:[
                {id:1,tname:'html'},
                {id:2,tname:'php'},
                {id:3,tname:'js'},
                {id:4,tname:'vue'}
            ],
            article:{
                title:'',
                author:'',
                tj:1,
                hot:1,
                cate:1,
                tag:[1]
            }
        }

    })
</script>
</body>
</html>